include clan-league-stats-mixin

mixin longLevelName(data)
  if data
    div.level-name
      span= data.courseName + ': '
      span(data-i18n='play_level.level')
      span.spl= data.levelNumber
  else
    div.level-name(data-i18n='teacher.not_applicable')

mixin inlineUserList(users)
  if users
    ul.inline-student-list.small
      each student in users.slice(0, 5)
        li
          span.inline-student-name
            = student.broadName()
      if users.length > 5
        li
          span.inline-student-name
            if /^en/.test(me.get('preferredLanguage', true))
              = `and ${users.length - 5} more`
            else
              = `+${users.length - 5}`

mixin addStudentsButton
  .add-students
    a.add-students-btn.btn.btn-lg.btn-primary(data-classroom-id=view.classroom.id)
      span(data-i18n='teacher.add_students_manually')
    if view.shouldShowGoogleClassroomButton()
      a.sync-google-classroom-btn.btn.btn-lg.btn-primary(data-classroom-id=view.classroom.id)
        span(data-i18n='teacher.sync_google_classroom')

mixin studentsTab
  #students-tab
    if !state.get('readOnly')
      div(dir=['he', 'ar', 'fa', 'ur'].indexOf(me.get('preferredLanguage', true)) == -1 ? 'ltr' : 'rtl')
        +bulkAssignControls
    else
      br
    table.students-table
      thead
        if !state.get('readOnly')
          th.checkbox-col.select-all.small.text-center
            span(data-i18n="teacher.select_all")
            .checkbox-flat
              - var allStudentsChecked = _.all(state.get('checkboxStates'))
              input(type='checkbox', id='checkbox-all-students', checked=allStudentsChecked)
              label.checkmark(for='checkbox-all-students')
        th
          +sortButtons
      tbody
        each student in state.get('students').models
          +studentRow(student)

mixin sortButtons
  .sort-buttons.small.rtl-allowed
    span(data-i18n='teacher.sort_by')
    span.spr :
    button.sort-button.sort-by-last-name(data-i18n='general.last_name', value='last-name')
    button.sort-button.sort-by-first-name(data-i18n='general.first_name', value='first-name')
    button.sort-button.sort-by-progress(data-i18n='teacher.progress', value='progress')

mixin studentRow(student)
  tr.student-row.alternating-background
    if !state.get('readOnly')
      td.checkbox-col.student-checkbox
        .checkbox-flat
          input(type='checkbox' id='checkbox-student-' + student.id, data-student-id=student.id, checked=state.get('checkboxStates')[student.id])
          label.checkmark(for='checkbox-student-' + student.id)
    td.student-info-col
      .student-info
        if student.get('deleted')
          em (deleted)
        - var url = '/teachers/classes/' + view.classroom.id + '/' + student.id;
        if state.get('renderOnlyContent')
          - url = '/school-administrator/teacher/' + view.classroom.get('ownerID') + '/classroom/' + view.classroom.id + '/' + student.id
        a.student-details-row(href=url, data-event-action='Teachers Click Student Profile')
          div.student-name= student.broadName()
        div.student-email.small-details= student.get('email') || student.get('name')
    td.hidden
      a.edit-student-button(data-student-id=student.id)
        span.glyphicon.glyphicon-edit
        span(data-i18n='teacher.edit')
    td.latest-level-col.small
      div
        i
          span(data-i18n='teacher.latest_completed')
      if view.allStatsLoaded()
        div
          +longLevelName(student.latestCompleteLevel)
      else
        div(data-i18n='common.loading')
    td
      if state.get('progressData')
        - var courses = view.sortedCourses.map(function(c) { return view.courses.get(c._id); });
        - var courseLabelsArray = view.helper.courseLabelsArray(courses);
        each trimCourse, index in view.sortedCourses
          - var course = view.courses.get(trimCourse._id);
          - var instance = view.courseInstances.findWhere({ courseID: course.id, classroomID: classroom.id })
          if instance && instance.hasMember(student)
            - var progress = state.get('progressData').get({ classroom: view.classroom, course: course, user: student })
            - var levelsTotal = _.reject(_.reject(trimCourse.levels, 'practice'), 'assessment').length
            - var label = courseLabelsArray[index];
            +studentCourseProgressDot(progress, levelsTotal, label, student, course, instance)
    if !state.get('readOnly')
      td
        .pull-right
          a.edit-student-link.small.center-block.text-center.m-r-2(data-student-id=student.id)
            div.glyphicon.glyphicon-edit
            div(data-i18n='teacher.edit')
          a.remove-student-link.small.center-block.text-center.m-r-2(data-student-id=student.id)
            div.glyphicon.glyphicon-remove
            div(data-i18n='teacher.remove')

mixin courseProgressTab
  #course-progress-tab.m-t-3
    if view.courses
      .course-progress-select-wrapper
        label(for="course-select")
          span(data-i18n='teacher.select_course_coco')
          span.spr :
        select.course-select#course-select
          each course in view.latestReleasedCourses
            option(value=course.id selected=(course===state.get('selectedCourse')))
              = i18n(course.attributes, 'name')
              if !view.availableCourseMap[course.id]
                = " " + translate('teacher.paren_new')

    - var course = state.get('selectedCourse');
    - var courseInstance = view.getSelectedCourseInstance()
    if courseInstance && course && view.campaignLevelNumberMap[course.get('campaignID')]
      .course-progress-select-wrapper(data-course-id=course.id)
        label(for="locked-level-select")
          span(data-i18n="courses.set_start_locked_level")
          span.spr :
        select#locked-level-select
          option(data-i18n="courses.no_level_limit" value='none')
          - var levels = view.classroom.getLevels({courseID: course.id}).models
          each level, levelIndex in levels
            unless level.get('assessment') || level.get('practice')
              option(value=level.get('slug') selected=(level.get('slug') === courseInstance.get('startLockedLevel')))
                span #{view.campaignLevelNumberMap[course.get('campaignID')][level.get('original')]}.
                  = " "
                span
                  = i18n(level.attributes, 'name').replace('Course: ', '')

    h4.m-b-2.m-t-3(data-i18n="teacher.progress_color_key")
    #progress-color-key-row.row.m-b-3
      .col.col-md-2.col-xs-4
        .progress-dot.forest
        .key-text
          span.small(data-i18n="play_level.level_complete")
        .clearfix
      .col.col-md-2.col-xs-4
        .progress-dot.gold
        .key-text
          span.small(data-i18n="teacher.level_in_progress")
        .clearfix
      .col.col-md-2.col-xs-4
        .progress-dot.navy
        .key-text
          span.small(data-i18n="teacher.project_or_arena")
        .clearfix
      .col.col-md-2.col-xs-4
        .progress-dot
        .key-text
          span.small(data-i18n="teacher.level_not_started")
        .clearfix

    // TODO: Refactor this to use Vue components like in the assessments tab
    if course && view.availableCourseMap[course.id] && courseInstance && courseInstance.get('members').length > 0
      .render-on-course-sync
        +courseOverview(course)
        .student-levels-table
          +sortButtons
          each student in state.get('students').models
            if _.contains(state.get('selectedCourse').members, student.id)
              +studentLevelsRow(student)
    else
      br
      h2.text-center
        i(data-i18n='teacher.no_student_assigned')
    .unassigned-students.render-on-course-sync
      if state.get('selectedCourse') && state.get('selectedCourse').members.length < state.get('students').length
        h2
          - var courseName = i18n(state.get('selectedCourse').attributes, 'name');
          span= translate('teacher.students_not_assigned').replace('{{courseName}}', courseName)
        for student in state.get('students').models
          unless _.contains(state.get('selectedCourse').members, student.id)
            .row.unassigned-student-row.alternating-background
              .student-name.col-sm-3
                = student.broadName()
              .student-email.small-details.col-sm-3
                = student.get('email') || student.get('name')
              .col-sm-4
                .latest-completed.truncate.small
                  i.m-r-1
                    span(data-i18n='teacher.latest_completed')
                  +longLevelName(student.latestCompleteLevel)
              if !state.get('readOnly')
                .col-sm-2
                  .assign-student-button.btn.btn-md.btn-navy.pull-right(data-user-id=student.id data-course-id=state.get('selectedCourse').id)
                    span(data-i18n='teacher.assign_course')

mixin courseOverview(course)
  - var levels = view.classroom.getLevels({courseID: course.id}).models
  .course-overview-row
    .course-title.student-name
      span= i18n(course.attributes, 'name')
      span= ': '
      span(data-i18n='teacher.course_overview')
    .course-overview-progress
      if state.get('progressData')
        - var lockedFromHere = false;
        - var courseInstance = view.getSelectedCourseInstance();
        each level, index in levels
          - if (level.get('assessment')) continue;
          - if (courseInstance && level.get('slug') === courseInstance.get('startLockedLevel')) lockedFromHere = true;          
          - var progress = state.get('progressData').get({ classroom: view.classroom, course: course, level: level })
          - var levelNumber = view.classroom.getLevelNumber(level.get('original'), index + 1, course.id)
          +allStudentsLevelProgressDot(progress, level, levelNumber, lockedFromHere)

mixin studentLevelsRow(student)
  .student-levels-row.alternating-background
    div.student-info
      div.student-name= student.broadName()
      div.student-email.small-details= student.get('email') || student.get('name')
    .row
      div.student-levels-progress.col.col-xs-12
        - var course = state.get('selectedCourse')
        - var levels = view.classroom.getLevels({courseID: course.id}).models
        - var courseFinished = false;
        if state.get('progressData')
          - var lockedFromHere = false;
          - var courseInstance = view.getSelectedCourseInstance();
          each level, index in levels
            - if (level.get('assessment')) continue;
            - if (courseInstance && level.get('slug') === courseInstance.get('startLockedLevel')) lockedFromHere = true;
            - var progress = state.get('progressData').get({ classroom: view.classroom, course: course, level: level, user: student })
            - var levelNumber = view.classroom.getLevelNumber(level.get('original'), index + 1, course.id)
            - if (!level.get('practice'))
              - courseFinished = progress.completed;
            +studentLevelProgressDot(progress, level, levelNumber, student, lockedFromHere)
      div
        if courseFinished
          a.certificate-link.open-certificate-btn(target='_blank', href='/certificates/' + student.id + '?class=' + view.classroom.id + '&course=' + course.id + '&course-instance=' + state.get('selectedCourseInstance').id, data-event-action="Teachers Click Certificates - Progress tab")
            img(src='/images/pages/user/certificates/certificate-icon.png')
            div(data-i18n='user.certificate_view')
        else
          .certificate-link(disabled=true)
            img(src='/images/pages/user/certificates/certificate-icon.png')
            div(data-i18n='user.certificate_course_incomplete')

mixin studentCourseProgressDot(progress, levelsTotal, label, student, course, courseInstance)
  //- TODO: Refactor with TeacherClassesView jade
  //- TODO: Give classes abbreviations instead of using index?
  - dotClass = progress.completed ? 'forest' : (progress.started ? 'gold' : '');
  - _.assign(progress, { levelsTotal: levelsTotal })
  if progress.completed
    a.open-certificate-btn(target='_blank', href='/certificates/' + student.id + '?class=' + view.classroom.id + '&course=' + course.id + '&course-instance=' + courseInstance.id, data-event-action="Teachers Click Certificates - Students tab")
      .progress-dot.has-tooltip(class=dotClass, data-html='true', data-title=view.singleStudentCourseProgressDotTemplate(progress))
        +progressDotLabel(label)
  else
    .progress-dot.has-tooltip(class=dotClass, data-html='true', data-title=view.singleStudentCourseProgressDotTemplate(progress))
      +progressDotLabel(label)

mixin allStudentsLevelProgressDot(progress, level, levelNumber, locked=false)
  - dotClass = progress.completed ? 'forest' : (progress.started ? 'gold' : '');
  - levelName = i18n(level.attributes, 'name')
  - context = _.merge(progress, { levelName: levelName, levelNumber: levelNumber, numStudents: view.students.length, practice: level.get('practice'), locked: locked })
  - link = null;
  - labelText = levelNumber;
  - var courseInstance = state.get('selectedCourseInstance');
  if level.isLadder()
    if courseInstance
      - link = view.urls.courseArenaLadder({level: level, courseInstance: courseInstance});
      - labelText = translate('teacher.view_arena_ladder');
    else
      - labelText = translate('courses.arena');
    - dotClass = 'navy progress-dot-lg';
  else if level.isProject()
    if courseInstance
      - link = view.urls.courseProjectGallery({courseInstance: courseInstance})
    - labelText = translate('teacher.view_project_gallery')
    - dotClass += ' progress-dot-lg';
  else if level.get('practice')
    if !(progress.completed || progress.started)
      - labelText = ''
      - dotClass += ' practice'
  if locked && !progress.completed
    - dotClass += ' locked'

  if link
    if state.get('readOnly')
      - link = link.replace('/teachers/classes/', '/school-administrator/teacher/' + view.classroom.get('ownerID') + '/classroom/')
    a.progress-dot.has-tooltip.level-progress-dot(class=dotClass, data-html='true', data-title=view.allStudentsLevelProgressDotTemplate(context), href=link)
      +progressDotLabel(labelText)
  else
    .progress-dot.has-tooltip.level-progress-dot(class=dotClass, data-html='true', data-title=view.allStudentsLevelProgressDotTemplate(context))
      +progressDotLabel(labelText)


mixin studentLevelProgressDot(progress, level, levelNumber, student, locked=false)
  //- TODO: Refactor with TeacherClassesView jade
  - dotClass = progress.completed ? 'forest' : (progress.started ? 'gold' : '');
  - levelName = i18n(level.attributes, 'name')
  - context = _.merge(progress, { levelName: levelName, levelNumber: levelNumber, moment: moment, practice: level.get('practice'), isProject: level.isProject(), assessment: level.get('assessment'), primaryConcept: _.first(level.get('primaryConcepts')), topScore: topScore, translate: translate, locked: locked })
  - var link = null;
  if dotClass
    //- TODO: these anchor links do not navigate to the anchor in destination page
    - link = '/teachers/classes/' + view.classroom.id + '/' + student.id + '#' + level.get('slug');
  - labelText = levelNumber;
  if level.isLadder()
    - labelText = translate('courses.arena');
    - dotClass += ' progress-dot-lg';
  else if level.isProject()
    if progress.started
      - link = view.urls.playDevLevel({level: level, session: progress.session, course: state.get('selectedCourse')});
      - labelText = translate('teacher.view_project');
      if progress.completed && !progress.session.published
        - labelText += " " + translate('teacher.unpublished')
      - dotClass = progress.completed ? 'navy' : (progress.started ? 'gold' : '');
    else
      - labelText = translate('teacher.project');
    - dotClass += ' progress-dot-lg';
  else if level.get('practice')
    if !(progress.completed || progress.started)
      - labelText = ''
      - dotClass += ' practice'
  if locked && !(progress.completed || progress.started)
    - dotClass += ' locked'

  if link
    if state.get('readOnly')
      - link = link.replace('/teachers/classes/', '/school-administrator/teacher/' + view.classroom.get('ownerID') + '/classroom/')
    a.progress-dot.has-tooltip.level-progress-dot.student-level-progress-dot(class=dotClass, data-html='true', data-title=view.singleStudentLevelProgressDotTemplate(context) href=link, data-student-id=student.id, data-level-slug=level.get('slug'), data-level-progress=(progress.completed ? 'complete' : progress.started ? 'started' : 'not started'), data-course-id=view.state.get('selectedCourse').id)
      +progressDotLabel(labelText)
  else
    .progress-dot.has-tooltip.level-progress-dot(class=dotClass, data-html='true', data-title=view.singleStudentLevelProgressDotTemplate(context))
      +progressDotLabel(labelText)
  if topScore && topScore.thresholdAchieved
    br
    img.threshold-icon.over-progress-bubble(src="/images/pages/courses/star-" + topScore.thresholdAchieved + ".png")

mixin progressDotLabel(label)
  .dot-label.text-center
    .dot-label-inner
      = label

mixin copyCodes
  div.copy-button-group.form-inline.m-b-3
    .input-group
      input.text-h4.semibold#join-code-input(value=state.get('classCode'), readonly)
      button#regenerate-code-btn.form-control.has-tooltip(disabled=!Boolean(value=state.get('classCode')) data-toggle='tooltip' data-i18n='[title]teacher.regenerate_class_code_tooltip')
        span.glyphicon.glyphicon-refresh
    button#copy-code-btn.form-control.btn.btn-lg.btn-forest
      span(data-i18n='teacher.copy_class_code')
    div.text-center.small.class-code-blurb(data-i18n='teacher.class_code_blurb')

  div.copy-button-group.form-inline.m-b-3
    .form-group
      input.text-h4.semibold#join-url-input(value=state.get('joinURL'), dir="ltr", readonly)
    button#copy-url-btn.form-control.btn.btn-lg.btn-forest
      span(data-i18n='teacher.copy_class_url')
    div.text-center.small.class-code-blurb(data-i18n='teacher.class_join_url_blurb')

mixin bulkAssignControls
  .bulk-assign-controls.form-inline
    .no-students-selected.small-details(class=state.get('errors').nobodySelected ? 'visible' : '')
      span(data-i18n='teacher.no_students_selected')
    span.small
      span(data-i18n='teacher.bulk_assign')
      span :
    select.bulk-course-select.form-control
      each course in _.rest(view.latestReleasedCourses)
        option(value=course.id selected=(course===state.get('selectedCourse')))
          = i18n(course.attributes, 'name')
          if !view.availableCourseMap[course.id]
            = " " + translate('teacher.paren_new')
    if !state.get('readOnly')
      button.btn.btn-primary.assign-to-selected-students(disabled=!view.allStatsLoaded())
        span(data-i18n='teacher.assign_course')
      button.btn.btn-burgundy-alt.remove-from-selected-students(disabled=!view.allStatsLoaded())
        span(data-i18n='teacher.remove_course')

mixin assessmentsTab
  #assessments-tab
    .text-center.m-t-3
      span(data-i18n='teacher.select_course_coco')
      span.spr :
      select.course-select
        each course in view.latestReleasedCourses
          if view.classroom.hasAssessments({courseId: course.id})
            option(value=course.id selected=(course === state.get('selectedCourse')))
              = i18n(course.attributes, 'name')
              if !view.availableCourseMap[course.id]
                = " " + translate('teacher.paren_new')

    h4.m-b-2.m-t-3(data-i18n="teacher.progress_color_key")
    #progress-color-key-row.row.m-b-3
      .col.col-md-2.col-xs-3
        .progress-dot.forest
        .key-text
          span.small(data-i18n='teacher.success')
        .clearfix
      .col.col-md-2.col-xs-3
        .progress-dot.gold
        .key-text
          span.small(data-i18n='teacher.in_progress')
        .clearfix
      .col.col-md-2.col-xs-3
        .progress-dot
        .key-text
          span.small(data-i18n='teacher.not_started')
        .clearfix
      .col.col-md-2.col-xs-3
        .progress-dot.pie
        .key-text
          span.small(data-i18n='TODO') Partially Complete
        .clearfix
    .assessments-table

mixin enrollmentStatusTab
  // TODO: Have search input in all tabs

  //form.form-inline.text-center.m-t-3
  //  #search-form-group.form-group
  //    label(for="student-search") Search for student:
  //    input#student-search.form-control.m-l-1(type="search")
  //    span.glyphicon.glyphicon-search.form-control-feedback

  table.table#license-status-table.table-condensed.m-t-3
    thead
      // Checkbox code works, but don't need it yet.
      //th.checkbox-col.select-all
        .checkbox-flat
          input(type='checkbox' id='checkbox-all-students')
          label.checkmark(for='checkbox-all-students')
      th(width='25%')
        .sort-buttons.small
          span(data-i18n='teacher.sort_by')
          span.spr :
          button.sort-button.sort-by-last-name(data-i18n='general.last_name', value='last-name')
          button.sort-button.sort-by-first-name(data-i18n='general.first_name', value='first-name')
          button.sort-button.sort-by-status(data-i18n='user.status', value='status')
      th(width='30%')
        span(data-i18n='teacher.owned_license')
      th(width='25%')
      if me.canRevokeLicensesViaUI() && !state.get('readOnly')
        th
          button.revoke-all-students-button.btn.btn-burgundy-alt(data-i18n="teacher.revoke_licenses")
    tbody
      - var searchTerm = state.get('searchTerm');
      each student in state.get('students').search(searchTerm)
        - var enrolledCourseBits = student.prepaidNumericalCourses()
        tr.student-row.alternating-background
          //td.checkbox-col.student-checkbox
            .checkbox-flat
              input(type='checkbox' id='checkbox-student-' + student.id, data-student-id=student.id)
              label.checkmark(for='checkbox-student-' + student.id)
          td.student-info-col
            .student-info
              div.student-name= student.broadName()
              div.student-email.small-details= student.get('email') || student.get('name')
          td.status-col
            if enrolledCourseBits == view.utils.courseNumericalStatus['FULL_ACCESS']
              strong(data-i18n='teacher.full_license')
            else if enrolledCourseBits
              - for(var index = 0; index < view.utils.orderedCourseIDs.length; index ++)
                if (enrolledCourseBits & Math.pow(2, index))
                  .icon=view.utils.courseAcronyms[view.utils.orderedCourseIDs[index]]
            else
              strong.text-danger(data-i18n='teacher.status_not_enrolled')
          td.expires-col
            - var licenses = student.activeProducts('course')
            if licenses.length == 1
              - var status = $.t('teacher.status_enrolled')
              strong= status.replace('{{date}}', moment(licenses[0].endDate).format('ll'))
            else if licenses.length > 1
              - var status = $.t('teacher.status_partly_expires')
              - var soonest = _.min(licenses.map((l) => new Date(l.endDate)))
              strong= status.replace('{{date}}', moment(soonest).format('ll'))
              .more ?
              .details
                each license in licenses
                  p= view.utils.formatStudentSingleLicenseStatusDate(license)
            else
              - var expired = student.expiredProducts('course')
              if expired.length
                - var latest = _.max(expired.map(p => new Date(p.endDate)))
                - var status = $.t('teacher.status_expired')
                strong.text-danger= status.replace('{{date}}', moment(latest).format('ll'))

          td.enroll-col
            if me.canManageLicensesViaUI() && !state.get('readOnly')
              button.enroll-student-button.btn.btn-navy(data-i18n="teacher.manage_license", data-user-id=student.id, data-event-action="Teachers Class Enrollment Enroll Student")

- var classroom = view.classroom
if !me.isTeacher() && !me.isAdmin()
  .alert.alert-danger.text-center
    .container
      //- DNT: Temporary
      h3 ATTENTION: Please upgrade your account to a Teacher Account.
      p
        | We are transitioning to a new improved classroom management system for instructors.
        | Please convert your account to ensure you retain access to your classrooms.
      a.btn.btn-primary.btn-lg(href="/teachers/update-account") Upgrade to teacher account

if classroom.loaded
  .container(dir="auto")
    div#classes-nag-subview
    if classroom.get('archived')
      .row.center-block.text-center.m-t-3.m-b-3
        if !state.get('readOnly')
          .unarchive-btn.btn.btn-lg.btn-navy
            span(data-i18n='teacher.unarchive_this_class')

    - var today = new Date()
    - var created = classroom.created()
    - var elapsed = today.getTime()-created.getTime()
    - var lastBigCampaignChange = new Date(2018, 0, 1)

    if !state.get('readOnly') && elapsed / (1000*60*60*24) > 180 && created < lastBigCampaignChange && classroom.get('name') != 'Demo Class'
      .update-class.rtl-allowed
        .alert.alert-info.text-center.rtl-allowed
          strong(data-i18n='courses.update_old_classroom')
          .small-details.rtl-allowed
            span.spr(data-i18n='courses.update_old_classroom_detail')
            a(data-i18n="courses.teacher_dashboard" href="/teachers/")
            span.spl(data-i18n="courses.update_old_classroom_detail_2")

    h3.m-t-2(dir="auto")= classroom.get('name')
    if classroom.isOwner()
      a.label.view-ai-league(data-event-action="Teachers Classes View AI League Team")
        span(data-i18n='teacher.view_ai_league_team')
    if !state.get('readOnly') && classroom.hasWritePermission()
      a.label.edit-classroom(data-classroom-id=classroom.id)
        span(data-i18n='teacher.edit_class_settings')
    if classroom.getDisplayPermission()
      | &nbsp;
      span=classroom.getDisplayPermission()

    a.pull-right.view-outcomes-report(href='/outcomes-report/classroom/' + classroom.id target="_blank")
      span(data-i18n='outcomes.view_outcomes_report')

    h4(dir="auto")!= view.markdownIt(classroom.get('description'))

    .classroom-info-row.row.m-t-5.rtl-allowed
      .classroom-details.col-md-3.rtl-allowed
        - var stats = state.get('classStats')
        h4.m-b-2(data-i18n='teacher.class_overview')

        .language.small-details
          span(data-i18n='teacher.language')
          span.spr :
          span= classroom.capitalLanguage

        .student-count.small-details
          span(data-i18n='courses.students')
          span.spr :
          span= classroom.get('members').length

        .average-playtime.small-details
          span(data-i18n='teacher.avg_playtime')
          span.spr :
          if view.allStatsLoaded()
            span= stats.averagePlaytime
          else
            span(data-i18n='common.loading')

        .total-playtime.small-details
          span(data-i18n='teacher.total_playtime')
          span.spr :
          if view.allStatsLoaded()
            span= stats.totalPlaytime
          else
            span(data-i18n='common.loading')

        .average-complete.small-details
          span(data-i18n='teacher.avg_completed')
          span.spr :
          if view.allStatsLoaded()
            span= stats.averageLevelsComplete
          else
            span(data-i18n='common.loading')

        .total-complete.small-details
          span(data-i18n='teacher.total_completed')
          span.spr :
          if view.allStatsLoaded()
            span= stats.totalLevelsComplete
          else
            span(data-i18n='common.loading')

        .total-complete.small-details
          span(data-i18n='teacher.created')
          span.spr :
          span= moment(classroom.created()).format('l')

        if view.students && view.students.models.length > 0
          button.export-student-progress-btn.btn.btn-lg.btn-primary(disabled=!view.allStatsLoaded())
            span(data-i18n='teacher.export_student_progress')


        //- .concepts.small-details
        //-   if state.get('progressData')
        //-     div
        //-       span(data-i18n='teacher.concepts_covered')
        //-       span :
        //-     - console.log('concepts', view.conceptData)
        //-     - concepts = view.conceptData
        //-     each state, name in view.conceptData[view.classroom.id]
        //-       if state.get('started')
        //-         b.concept(class=state.get('completed') ? 'forest' : 'gold')
        //-           span(data-i18n='concepts.'+name)

      .completeness-info.col-md-4
        h4.m-b-2
          | &nbsp;
        div.small-details.rtl-allowed
          if state.get('earliestIncompleteLevel')
            span(data-i18n='teacher.earliest_incomplete')
            span :
            +longLevelName(state.get('earliestIncompleteLevel'))
            +inlineUserList(state.get('earliestIncompleteLevel').users)
          else if (view.classroom.get('members') || []).length > 0 && !view.allStatsLoaded()
            span(data-i18n='teacher.earliest_incomplete')
            span :
            div(data-i18n='common.loading')

        div.small-details.m-t-3.rtl-allowed
          if state.get('latestCompleteLevel')
            span(data-i18n='teacher.latest_complete')
            span :
            +longLevelName(state.get('latestCompleteLevel'))
            +inlineUserList(state.get('latestCompleteLevel').users)
          else if (view.classroom.get('members') || []).length > 0 && !view.allStatsLoaded()
            span(data-i18n='teacher.latest_complete')
            span :
            div(data-i18n='common.loading')
        if me.isAdmin()
          button.create-activation-codes-btn.btn.btn-lg.btn-primary(disabled=!view.allStatsLoaded())
            span(data-i18n='admin.create_activate_codes') activation codes

      .adding-students.col-md-5
        h4.m-b-2
          span(data-i18n='courses.add_students')
          span :
        +copyCodes
        if !state.get('readOnly')
          +addStudentsButton

    if view.students.length > 0
      ul.nav.nav-tabs.m-t-5(role='tablist')
        - var activeTab = state.get('activeTab');
        li(class=(activeTab === "#students-tab" ? 'active' : ''))
          a.students-tab-btn(href='#students-tab')
            .small-details.text-center(data-i18n='courses.students')
        .tab-spacer
        li(class=(activeTab === "#course-progress-tab" ? 'active' : ''))
          a.course-progress-tab-btn(href='#course-progress-tab')
            .small-details.text-center(data-i18n='teacher.course_progress')
        .tab-spacer
        if view.classroom.hasAssessments()
          li(class=(activeTab === "#assessments-tab" ? 'active' : ''))
            a.assessments-tab-btn(href='#assessments-tab')
              .small-details.text-center(data-i18n='teacher.assessments')
          .tab-spacer
        li(class=(activeTab === "#license-status-tab" ? 'active' : ''))
          a.course-progress-tab-btn(href='#license-status-tab')
            .small-details.text-center(data-i18n='teacher.license_status')
        .tab-spacer
        li(class=(activeTab === "#ai-league-stats-tab" ? 'active' : ''))
          a.course-progress-tab-btn(href='#ai-league-stats-tab')
            .small-details.text-center AI League
        .tab-filler

      .tab-content
        if activeTab === '#students-tab'
          +studentsTab
        else if activeTab === '#course-progress-tab'
          +courseProgressTab
        else if activeTab === '#assessments-tab'
          +assessmentsTab
        else if activeTab === '#license-status-tab'
          +enrollmentStatusTab
        else if activeTab === '#ai-league-stats-tab'
          +clanLeagueStatsMixin(view.aiLeagueStats, (view.classClan ? view.classClan._id : null), true, view.classroom)

    else
      .text-center.m-t-5.m-b-5
        .text-h2
          span(data-i18n="teacher.no_students_yet")
        .text-h4
          span(data-i18n="teacher.try_refreshing")
